@charset "utf-8";
@import "common";

.jiugonggeWeb{
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 0;
    .head{
            position: relative;
            overflow: hidden;
            height: 20%;
            width: 100%;
            &>img{
               height:100%;
               width: 100%;
            }
            &>div{
                position: absolute;
            }
            .zhuozi{
                left: 50%;
                width: 82.03%;
                bottom:r(6);
                img{
                    width: 100%;
                    animation: zhuozi 1s infinite;
                }
            }
            .lingdang{
                width: 11.72%;
                left: 66%;
                bottom: r(36);
                img{
                    width: 100%;
                    animation: lingdang 1s infinite;
                }
            }
            .huanlesong{
                left: 50%;
                top:50%;
                width: 46.72%;
                img{
                    width: 100%;
                    animation: huanlesong 1s infinite;
                }
            }
            .left{
                top: r(20);
                left: 1.65%;
                height: r(40);
                img{
                    height: 100%;
                }
            }
            .right{
                top: r(20);
                right: 1.72%;
                height: r(40);
                img{
                    height: 100%;
                }
            }
            .isP {
                animation: right 3s infinite linear;
                @keyframes right{
                    0% {
                        transform: rotate(0);
                    }
                    25% {
                        transform: rotate(90deg);
                    }
                    50% {
                        transform: rotate(180deg);
                    }
                    75% {
                        transform: rotate(270deg);
                    }
                    100% {
                        transform: rotate(360deg);
                    }
                }
            }

        }
    
    .content{
        width: 100%;
        height: 81%;
        .pic{
            box-sizing: border-box;
            border: 2px solid transparent;
            display: inline-block;
            width: 33.28%;
            height: 34%;
            img{
                width: 100%;
                height: 100%;
               
            }
        }
//      .pic:nth-child(5):hover{
//          transform: scale(1.2);
//      }
        .yinying{
            opacity:.5;
            background: darkblue;
            border: r(2) solid red;
        }
    }
}
@keyframes huanlesong {
  from {
    transform-origin: center;
    transform:translate(-50%,-50%) rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    transform-origin: center;
    transform:translate(-50%,-50%) ;
    opacity: 1;
  }
}
@keyframes lingdang{
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(0.75);
    }
    50%{
        transform: scale(0.5);
    }
    75%{
        transform: scale(0.25);
    }
    100%{
        transform:scale(0);
    }
}
@keyframes zhuozi {
  20% {
    transform:translateX(-50%) rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform:translateX(-50%) rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform:translateX(-50%) rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform:translateX(-50%) rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform:translateX(-50%) rotate3d(0, 0, 1, 0deg);
  }
}
